<template>
  <div class="activation_box">
    <div class="activation_condition">
      <div class="items">
        <div class="label">{{$t('m.xingming')}}</div>
        <Input type="text" class="ivu-input-w200" v-model="blackListObj.uname" :placeholder="$t('m.xingming')" />
      </div>
      <div class="items">
        <div class="label">{{$t('m.shoujihao')}}</div>
        <Input type="text" class="ivu-input-w200" v-model="blackListObj.uphone" :placeholder="$t('m.shoujihao')" />
      </div>
    </div>
    <div style="margin-top:10px;">
      <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryBlackList">{{$t('m.recycle')}}</Button>
      <Button class="parameter_button" type="primary" @click="queryBlackList">{{$t('m.cháxún')}}</Button>

      <Button class="parameter_button" style="float:right;margin-right:10px;" icon="md-open" type="info" @click="ImportBlackBox = true">{{$t('m.pīliàngdǎorù')}}</Button>

      <Button class="parameter_button" style="float:right;margin-right:10px;" icon="md-archive" type="success" @click="toLeadTemplate()">{{$t('m.dǎorùmúbǎn')}}</Button>
      <Button class="parameter_button" style="float:right;margin-right:30px;" icon="ios-add-circle-outline" type="warning" @click="blackListEvent()">{{$t('m.xīnjiànhēimíngdān')}}</Button>
      <Button class="parameter_button" style="float:right;margin-right:10px;" icon="ios-trash" type="error" disabled v-if="!blackListInfData.length">{{$t('m.yíchúhēimíngdān')}}</Button>
      <Button class="parameter_button" style="float:right;margin-right:10px;" icon="ios-trash" type="error" v-else @click="getInformEvent()">{{$t('m.yíchúhēimíngdān')}}</Button>
    </div>
    <div class="activation_table">
      <Table :columns="blackListTable" :data="blackListData.list" @on-selection-change="blackListSelectTable" :loading="blackListLoading">
        <!-- <template slot-scope="{ row, index }" slot="action">
          <Button type="success" size="small" class="ivu-btn-success ivu-btn-long ivu-btn-small" @click="getBankInfo(row.userId)">{{$t('m.userDetails')}}</Button>
        </template> -->
      </Table>
    </div>
    <div class="activation_page">
      <Page :total="blackListData.size" :current.sync="activationPages" :page-size-opts="[1, 10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="tabTwoWritePage" @on-page-size-change="tabTwoClickPage" style="margin: 15px 0;"></Page>
    </div>
    <!--用户详细资料end-->
    <Modal v-model="baseInfoBox" class="baseInfo_box_title" :title="$t('m.sUI')" width="70%">
      <base-info :userId="UserId" orderGid="" baseType="" v-if="baseInfoBox"></base-info>
      <div slot="footer"></div>
    </Modal>

    <!-- 新增黑名单 -->
    <Modal v-model="blackListStaffBox" :title="this.$t('m.xīnjiànhēimíngdān')" @on-ok="blackListStaffOk" @on-cancel="">

      <Form ref="newBlack" :label-width="80" style="margin:0 20px;">

        <Row>
          <Col span="18">
          <FormItem prop="name">
            <span slot='label'><i style="color:red;margin-right:3px;">*</i>{{$t('m.shǒujīhào')}}</span>
            <Input v-model="queryUphone" :placeholder="this.$t('m.qǐngshūrù')"></Input>
          </FormItem>
          </Col>
          <Col span="6" style="    height: 100%;    text-align: center;">
          <Button type="primary" @click="queryBlackSubmit()">{{$t('m.cháxún')}}</Button>

          </Col>
        </Row>
        <FormItem :label="this.$t('m.xingming')">
          <span>{{newBlack.uname}}</span>
        </FormItem>
        <FormItem :label="this.$t('m.shǒujīhào')">
          <span>{{newBlack.uphone}}</span>
        </FormItem>
        <FormItem :label="this.$t('m.in')">
          <span>{{newBlack.idnumber}}</span>
        </FormItem>
        <FormItem :label="this.$t('m.zhengjianleixing')">
          <span>{{newBlack.idtype}}</span>
        </FormItem>
        <FormItem :label="this.$t('m.userSou')">
          <span>{{newBlack.dsource}}</span>
        </FormItem>
        <FormItem prop="desc">
          <span slot='label'><i style="color:red;margin-right:3px;">*</i>{{$t('m.bèizhù')}}</span>
          <Input v-model="newBlack.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" :placeholder="this.$t('m.qǐngshūrù')"></Input>
        </FormItem>
        <FormItem>
          <Button style="margin-left: 8px" @click="blackListStaffBox = false,newBlack= {}">{{$t('m.cancel')}}</Button>
          <Button type="primary" style="margin-left:30px;" @click="newBlackSubmit()">{{$t('m.submit')}}</Button>
        </FormItem>
      </Form>

      <!-- <h4 style="  display: inline;  margin: 35px;">{{$t('m.selectZhipai')}}</h4>
      <Select v-model="blackListStaffSelectData" style="width:60%;margin:auto;" v-bind:placeholder="$t('m.selectZhipai')">
        <Option v-for="item in blackListStaffDataList" :value="item.id" :key="item.account">{{ item.account }}</Option>
      </Select> -->
      <div slot="footer"></div>
    </Modal>
    <!-- 通知用户 -->
    <Modal v-model="blackListInformBox" :title="this.$t('m.tōngzhī')" @on-ok="blackListInformOk" @on-cancel="">
      <h4 style="text-align: center;">{{$t('m.sdList')}}?</h4>
    </Modal>
    <Modal v-model="ImportBlackBox" :title="this.$t('m.pīliàngdǎorù')+this.$t('m.black')" @on-ok="ImportBlackOk" @on-cancel="">

      <div>
        <Upload :before-upload="handleUpload" action="">
          <Button icon="ios-cloud-upload-outline">{{$t('m.xuǎnzédǎorùwénjiàn')}}</Button>
        </Upload>
        <div v-if="file !== null">{{ file.name }}</Button></div>
      </div>

    </Modal>
  </div>
</template>

<script>
// import { exportMethod } from '@/libs/util'
import BaseInfo from '@/components/common/baseInfo'
export default {
  name: 'customerActivation',
  data () {
    return {
      file: null,
      loadingStatus: false,
      queryUphone: "",
      ImportBlackBox: false,
      blackListInformBox: false,
      blackListInfData: [],
      blackListLoading: false,
      blackListStaffDataList: [],
      blackListStaffSelectData: '',
      blackListStaffBox: false,
      blackListSelectData: [],
      baseInfoBox: false,
      activationPages: 1,
      newBlack: {},
      blackListObj: {
        'pageNumber': 1,
        'pageSize': 10
      },
      statusLoanObj: {
        'none': this.$t('m.zhùcèwèishēnqǐng'),
        'repaid': this.$t('m.jiéqīngwèifùjiè'),
      },
      blackListTable: [
        {
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          title: this.$t('m.chuàngjiànshíjiān'),
          align: 'center',
          width: 200,
          key: 'ctime',
          // render: (h, param) => {
          //   return h("div", this.statusLoanObj[param.row.statusLoan]);
          // }
        },
        {
          title: this.$t('m.bǎoliútiānshù'),
          align: 'center',
          key: 'remainingDays'
        },
        {
          title: this.$t('m.xingming'),
          align: 'center',
          key: 'uname'
        },
        {
          title: this.$t('m.shoujihao'),
          align: 'center',
          key: 'uphone'
        },
        {
          title: this.$t('m.in'),
          align: 'center',
          key: 'idnumber'
        },
        {
          title: this.$t('m.zhengjianleixing'),
          align: 'center',
          key: 'idtype'
        },
        {
          title: this.$t('m.userSou'),
          align: 'center',
          key: 'dsource'
        },
        {
          title: this.$t('m.bèizhù'),
          align: 'center',
          key: 'remark'
        },
        {
          title: this.$t('m.czsr'),
          align: 'center',
          key: 'operator'
        },
      ],
      blackListDataInfo: {},
      blackListData: {
        size: 1,
      },
    }
  },
  components: {
    BaseInfo
  },
  props: {},
  watch: {},
  methods: {

    handleUpload (file) {
      this.file = file;
      console.log(file, "表格文件")
      return false;
    },
    ImportBlackOk () {


      // this.$axios({
      //   method: "post",
      //   url: "/api/laocai/risk/black/addBatch",
      //   headers: {
      //     'x-peacock-auth': localStorage.getItem('x-peacock-auth'),
      //     'Content-Type': 'multipart/form-data'
      //   },
      //   params: {},
      //   data: {
      //     riskBlackfile: this.file,
      //   }
      // }).then((res) => {
      //   debugger
      // }).catch(error => {
      //   // this.$Notice.error({
      //   //   title: '错误',
      //   //   desc: '网络连接错误'
      //   // })
      //   console.log(error)
      // })

      // .$http({
      // 　　　　url:this.HOST + api.upload,
      // 　　　　data:formData, //在此处上传文件
      // 　　　　method: "post",
      // 　　　　headers:{
      // 　　　　　　'Content-Type':'multipart/form-data' //值得注意的是，这个地方一定要把请求头更改一下
      // 　　　　}
      // 　　　　}).










      if (this.file) {
        this.$http(
          {
            url: '/api/laocai/risk/black/addBatch',
            data: {
              riskBlackfile: this.file,
            },
            method: "post",
            headers: {
              'Content-Type': 'multipart/form-data' //值得注意的是，这个地方一定要把请求头更改一下
            }
          }
        ).then((res) => {
          if (res.body.code == 0) {
          }
          this.$Message.success(this.$t('m.fēnpèi') + this.$t('m.errorCode' + res.body.code));
          setTimeout(() => {
            this.queryBlackList()
          }, 1000);
        }, error => { });
      } else {

        this.$Message.error(this.$t('m.xuǎnzédǎorùwénjiàn'));
      }



      // this.loadingStatus = true;
      // setTimeout(() => {
      //     this.file = null;
      //     this.loadingStatus = false;
      //     this.$Message.success('Success')
      // }, 1500);
    },



    toLeadTemplate () {

      this.$axios({
        method: "get",
        url: "/api/laocai/risk/black/export",
        headers: {
          'x-peacock-auth': localStorage.getItem('x-peacock-auth'),
          'Content-Type': 'application/json;charset=UTF-8'
        },
        responseType: 'blob',
        params: {},
        data: {}
      }).then((res) => {
        const link = document.createElement('a')
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)

        // link.download = res.headers['content-disposition'] //下载后文件名
        link.download = this.$t('m.dǎorùmúbǎn') //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).catch(error => {
        this.$Notice.error({
          title: '错误',
          desc: '网络连接错误'
        })
        console.log(error)
      })
    },

    queryBlackSubmit () {

      let param = {},
        query = '';
      param.phone = this.queryUphone
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/user/riskBlackInfo?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.newBlack.uname = res.body.result.uname
          this.newBlack.uphone = res.body.result.uphone
          this.newBlack.idnumber = res.body.result.idnumber
          this.newBlack.idtype = res.body.result.idtype
          this.$set(this.newBlack, "dsource", res.body.result.dsource);
        } else {
          this.newBlack = []
        }
      });
    },


    newBlackSubmit () {
      if (this.newBlack.uphone) {
        if (this.newBlack.remark) {
          this.$http.post('/api/laocai/risk/black/add', this.newBlack).then((res) => {
            if (res.body.code == 0) {
            }
            this.queryUphone = "",
              this.newBlack = {}
            this.$Message.success(this.$t('m.xīnjiànhēimíngdān') + this.$t('m.errorCode' + res.body.code));
            console.log(res.body.code,"梳发士大夫啊手动阀手动阀")
            setTimeout(() => {
              this.queryBlackList()
              this.blackListStaffBox = false
            }, 1000);
          }, error => { });
        } else {
          this.$Message.error(this.$t('m.qǐngshūrùbèizhù'));
        }

      } else {
        this.$Message.error(this.$t('m.qǐngxiāncháxúnyònghùxìnxī'));
      }
    },


    blackListInformOk () {
      if (this.blackListInfData) {
        this.$http.post('/api/laocai/risk/black/remove', { 'removeList': this.blackListInfData }).then((res) => {
          if (res.body.code == 0) {
          }
          this.blackListInfData = []
          this.$Message.success(this.$t('m.yíchúhēimíngdān') + this.$t('m.errorCode' + res.body.code));
          setTimeout(() => {
            this.queryBlackList()
          }, 1000);
        }, error => { });
      } else {
        this.$Message.error(this.$t('m.selectZhipai'));
      }
    },
    blackListEvent () {
      // this.queryServiceStaff(),
      this.blackListStaffBox = true,
        this.blackListStaffSelectData = ''
    },
    blackListStaffOk () {
      if (this.blackListStaffSelectData) {
        this.$http.post('/api/laocai/operation/activeAllot/save', {
          userIds: this.blackListSelectData,
          accountId: this.blackListStaffSelectData
        }).then((res) => {
          if (res.body.code == 0) {
          }
          this.blackListSelectData = []
          this.$Message.success(this.$t('m.fēnpèi') + this.$t('m.errorCode' + res.body.code));
          setTimeout(() => {
            this.queryBlackList()
          }, 1000);
        }, error => { });
      } else {

        this.$Message.error(this.$t('m.selectZhipai'));
      }

    },

    queryServiceStaff () {

      let url = '/api/laocai/sys/account/list?roleName=service'
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.blackListStaffDataList = res.body.result.list
        } else {
          this.blackListStaffDataList = []
        }

      });
    },

    // 选择admin表格选择初审人员数据
    blackListSelectTable (selection) {
      // this.blackListSelectData = []
      this.blackListInfData = []
      for (const key in selection) {
        // this.blackListSelectData.push(selection[key].userId)
        this.blackListInfData.push({ 'uphone': selection[key].uphone, 'idnumber': selection[key].idnumber })
      }
    },
    getInformEvent () {
      this.blackListInformBox = true
    },
    getBankInfo (userId, orderGid) {
      this.baseInfoBox = true
      this.UserId = userId
      this.baseInfoOrderGid = orderGid
    },
    // 修改页数
    tabTwoWritePage (index) {
      this.blackListObj.pageNumber = index
      this.queryBlackList()
    },
    // 修改每页条数
    tabTwoClickPage (index) {
      this.blackListObj.pageSize = index
      this.queryBlackList()
    },

    emptyQueryBlackList () {
      this.blackListObj = {
        'pageNumber': 1,
        'pageSize': 10
      }
      this.$refs.blackListAllotTime.handleClear()
      this.queryBlackList()
    },
    // tab请求数据
    queryBlackList () {
      this.blackListLoading = true
      let param = {},
        query = '';
      param.uname = this.blackListObj.uname
      param.uphone = this.blackListObj.uphone


      param.pageNumber = this.blackListObj.pageNumber
      param.pageSize = this.blackListObj.pageSize

      // param.statusLoan = this.blackListObj.statusLoan
      // param.allotStatus = this.blackListObj.allotStatus
      // param.startDate = this.blackListObj.startDate
      // param.endDate = this.blackListObj.endDate
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/risk/black/list?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          console.log(res.body.result, "黑玫瑰i电脑数据")
          this.blackListData = res.body.result
        } else {
          this.blackListData = {}
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
        setTimeout(() => {
          this.blackListLoading = false
        }, 500);
      });
    },
    loginTimeChange (e) {
      if (typeof (e) == "undefined") {
        this.assignedDateBegin = e[0];
      } else if (typeof (e) == "object") {
        this.blackListObj.startDate = e[0];
        this.blackListObj.endDate = e[1];
      }
    },
  },
  filters: {},
  computed: {},
  created () { },
  mounted () {
    this.queryBlackList()
  },
  destroyed () { }
}
</script>

<style  lang="scss" scoped>
@import "../../static/style.css";
@import "../../static/common.scss";
.activation_box {
  padding: 15px;
  .activation_condition {
    // margin-top: 20px;
    .items {
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 20px;
      width: 200px;
      .label {
        overflow: hidden;
        white-space: inherit;
        text-align: right;
        color: #222;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
  .activation_table {
    margin-top: 25px;
    .ivu-btn-long {
      margin: 6px 0;
    }
  }
  .activation_page {
    float: right;
  }
}
.shenTong_tab_item {
  // background: red;
  margin-top: 20px;
  .item_Col {
    // background: #fff;
    text-align: center;
    .item_Col_box {
      height: 160px;
      margin: 12px;
      padding: 19px 30px;
      background: #f0f2f5;
      p {
        text-align: left;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
      span {
        font-size: 45px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: rgba(34, 34, 34, 1);
      }
    }
  }
}
</style>
